<template>
    <div v-loading="loading" class="div-box">
        <instance-preview v-if="selectInstance.processVisible &&  !loading" :node-id="selectInstance.nodeId"
            :instance-id="selectInstance.instanceId" :taskPage="true"></instance-preview>
    </div>
</template>
<script setup>
import InstancePreview from '../workspace/approval/ProcessInstancePreview.vue'
import { useRouter, useRoute } from "vue-router";
import { reactive, onMounted,onBeforeMount, ref } from 'vue';
import { login } from '@/api/sys'
import { useStore } from "vuex";
let store = useStore();
// 获取url参数
const route = useRoute();
const router = useRouter();
const selectInstance = reactive({
    nodeId: route.query.nodeId,
    instanceId: route.query.instanceId,
    uerId: route.query.uerId,
    processVisible: false,
    roles: localStorage.getItem('roles')|| '', // 角色判断显示权限
})
const loading = ref(true)

onBeforeMount(async() => {
    await login(selectInstance.uerId).then(rsp => {
        let user = {
            id: rsp.data.userId,
            name: rsp.data.userName,
            avatar: rsp.data.avatar,
            position: rsp.data.position,
            type: 'user',
        }
        selectInstance.roles = rsp.data.roles
        localStorage.setItem('roles', JSON.stringify(selectInstance.roles))
        localStorage.setItem('wflow-token', rsp.data.token)
        store.commit('loginUserAdd', user)
        selectInstance.processVisible = true
        loading.value = false
    })
})


</script>
<style scoped>
.div-box {
    /* background-color: #fff; */
    /* padding: 10px 300px; */
    overflow: auto;
    height: 100%;
}
</style>